<template>
    <!-- 客户管理 -->
    <!-- 上下游企业管理 -->
    <div>
      <!-- 搜索按钮 -->
      <div class="top_bar">
        <div class="left">
          <!-- 下拉菜单 -->
          <el-dropdown>
            <el-button
              class="zhuangtai first"
              type="primary"
              style="background-color: white; border-color: gray; color: gray"
            >
              企业名称<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>全部</el-dropdown-item>
                <el-dropdown-item>启用</el-dropdown-item>
                <el-dropdown-item>禁用</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <!-- 搜索框  -->
          <el-input
            v-model="input4"
            class="w-50 m-2"
            placeholder="请输入要查询的核心企业名称"
          >
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
  
          <el-button type="primary" class="zhuangtai btn">查询</el-button>
          <el-button class="zhuangtai btn btn1">重置</el-button>
        </div>
        <div class="right" @click="dialogFormVisible = true">
          <el-button class="zhuangtai btn btn1" @click="dialogFormVisible = true"
            ><el-icon><Plus /></el-icon>导出</el-button
          >
          <el-button class="zhuangtai btn btn1" @click="dialogFormVisible = true"
            ><el-icon><Plus /></el-icon>新增</el-button
          >
        </div>
      </div>
      <!-- 表格数据 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="序号" label="序号" width="180">
          <!-- 组件插槽 -->
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="企业名称" width="180" />
        <el-table-column prop="shehui" label="社会信用代码" />
        <el-table-column prop="money" label="注册资本" />
        <el-table-column prop="laiyuan" label="客户来源"/>
        <el-table-column prop="time" label="更新时间"/>
        <el-table-column prop="caozuo" label="操作">
          <template #default="scope">
            <!-- <el-button type="danger" @click="handleDelete(scope.row.adminid)">Delete</el-button> -->
            <div class="iconbtn">
              <el-icon><Edit /></el-icon>
              <el-icon><View /></el-icon>
              <el-icon><Delete /></el-icon>
            
            </div>
          </template>
        </el-table-column>
      </el-table>
          <!-- 分页 -->
          <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[10, 20, 30, 40]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </template>
  
  <script setup>
  import {ref } from "vue"
  // 分页内容
  var currentPage4 = ref(1);
  var pageSize4 = ref(10);
  
  var tableData=[
      {
      name: "牛马有限公司",
      shehui: "91110000100010433L",
      money: "100,000",
      laiyuan:'xxx',
      time:'yyy',
  
    },
      {
      name: "牛马有限公司",
      shehui: "91110000100010433L",
      money: "100,000",
      laiyuan:'xxx',
      time:'yyy',
  
    },
      {
      name: "牛马有限公司",
      shehui: "91110000100010433L",
      money: "100,000",
      laiyuan:'xxx',
      time:'yyy',
  
    },
  ]
  </script>
  
  <style scoped lang="scss">
  .top_bar {
    display: flex;
    justify-content: space-between;
    .input {
      min-width: 250px;
    }
    .left {
      height: 40px;
      display: flex;
      justify-content: space-between;
    }
    .zhuangtai {
      height: 100%;
      margin: 0 10px;
    }
  
    .btn1 {
      color: #4aa5fe;
      border-color: #4aa5fe;
    }
    .first {
      border: none;
    }
  }
  .btn {
    width: 100px;
  }
  // 表格
  .is-scrolling-none{
    margin-top: 30px;
  }
  .iconbtn{
    width: 150px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    line-height: 32px;
    cursor: pointer;
  }
  /* 分页样式 */
  .el-pagination {
    margin-top: 20px;
    position: absolute;
    left: 50%;
    transform: translate(-33%, 50%);
  }
  .el-dialog {
    height: 600px;
  }
  </style>